<template>
  <div class="body">
    <div class="left">
      <div class="left-imag">
        <div class="imag1"></div>
        <div class="imag2"></div>
        <div class="imag3"></div>
      </div>
      <div class="left-text">
        <div class="title">
          <p class="title-text" v-for='item in Notice' :key='item.Gid' v-if='item.Gid==1'>{{item.Title}}</p>
        </div>
        <div class="text">
            <p class="text-text" v-for='item in Notice' :key='item.Gid' v-if='item.Gid<=7'>{{item.GoContent}}</p>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="right-top">
        <div class="top-left">
            <div class="Before">
              <div class="atitle">
                <span class="titlt" v-for='item in Notice' :key='item.Gid' v-if='item.Gid==8'>{{item.Title}}</span>
              </div>
              <div class="right-text">
                <p class="text" v-for='item in Notice' :key='item.Gid' v-if='item.Gid >7 && item.Gid<=12'>{{item.GoContent}}</p>
              </div>
            </div> 
            <div class="After"></div>
        </div>
        <div class="top-right">
            <div class="Before2">
              <div class="atitle">
                <span class="titlt" v-for='item in Notice' :key='item.Gid' v-if='item.Gid==8'>{{item.Title}}</span>
              </div>
              <div class="right-text">
                <p class="text" v-for='item in Notice' :key='item.Gid' v-if='item.Gid >7 && item.Gid<=12'>{{item.GoContent}}</p>
              </div>
            </div> 
            <div class="After2"></div>
        </div>
      </div>
      <div class="right-bottom">
        <div class="bottom-left">
            <div class="Before3">
              <div class="atitle">
                <span class="titlt" v-for='item in Notice' :key='item.Gid' v-if='item.Gid==8'>{{item.Title}}</span>
              </div>
              <div class="right-text">
                <p class="text" v-for='item in Notice' :key='item.Gid' v-if='item.Gid >7 && item.Gid<=12'>{{item.GoContent}}</p>
              </div>
            </div> 
            <div class="After3"></div>
        </div>
        <div class="bottom-right">
            <div class="Before4">
              <div class="atitle">
                <span class="titlt" v-for='item in Notice' :key='item.Gid' v-if='item.Gid==8'>{{item.Title}}</span>
              </div>
              <div class="right-text">
                <p class="text" v-for='item in Notice' :key='item.Gid' v-if='item.Gid >7 && item.Gid<=12'>{{item.GoContent}}</p>
              </div>
            </div> 
            <div class="After4"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios"

export default {
    data(){
        return{ 
          Notice:[],
        }
    },
    mounted(){
        this.getList()
    },
    methods:{
      getList(){
        axios.get("http://localhost:3000/api/notice")
        .then(res =>{
            this.Notice = res.data;
            console.log(this.Notice);
        })
      }
    }
}
</script>

<style scoped>

.body{
    width: 80%;
    height: 39rem;
    margin: 2% auto;
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
}

.left{
  width: 35%;
  height: 90%;
  margin-left: 4%;
  position: relative;
  top: 5%;
  /* background-color: gray; */
}

.left-imag{
  width: 100%;
  height: 28%;
  /* background-color: aqua; */
  display: flex;
  flex-direction: row;
  /* background-image: url(../assets/images/notice/1.jpg); */
}

.imag1{
  width: 31%;
  height: 100%;
  background-position: -4.9rem 1rem;
  zoom: 0.62;
  margin-left: 3%;
  background-image: url(../assets/images/notice/3.png);
}
.imag2{
  width: 31%;
  height: 90%;
  background-position: -22rem 0.6rem;
  margin-right: 2%;
  zoom: 0.62;
  background-image: url(../assets/images/notice/3.png);
}
.imag3{
  width: 31%;
  height: 98%;
  background-position: -4.9rem 14.8rem;
  zoom: 0.62;
  background-image: url(../assets/images/notice/3.png);
}

.left-text{
  width: 100%;
  height: 73%;
  margin-top: 3%;
  border: solid 0.5rem rgb(255, 157, 204);
  border-radius: 1rem;
  /* background-color: bisque; */
}

.title{
  width: 70%;
  height: 14%;
  /* background-color: pink; */
  margin: 0rem auto;
}

.title-text{
  height: 60%;
  width: 50%;
  font-size: 2rem;
  font-family: "宋体";
  border-bottom: 0.1rem solid rgb(255, 157, 204);
  /* margin-left: 35%; */
  margin: auto;
  padding-top: 1rem;
  padding-left: 1rem;
  color: black;
  overflow: hidden;
  /* margin-top: 1rem; */
}

.left-text .text{
  height: 76%;
  width: 90%;
  margin: 0 auto;
  text-decoration:none;
  /* background-color: pink; */
}

.text-text{
  font-size: 1.15rem;
  height: 9%;
  right: 100%;
  /* color: black; */
  border-bottom: 0.1rem dashed rgb(255, 157, 204);
  overflow: hidden;
}

/* 右边 */
 
.right{
  width: 53%;
  height: 90%;
  margin-left: 4%;
  position: relative;
  top: 5%;
  /* background-color: gray; */
}

.right-top{
  width: 100%;
  height: 53%;
  /* background-color: blue; */
  display: flex;
  flex-direction: row;
}

.right-bottom{
  width: 100%;
  height: 53%;
  /* background-color: darkcyan; */
  display: flex;
  flex-direction: row;
}
/* 右边第一个 */
.top-left{
  width: 48%;
  height: 90%;
  margin: 2%;
  border-radius: 1rem;
  border: 0.3rem dashed rgb(116, 200, 225);
  position: relative;
  perspective: 800px;
  /* background-color: rgb(82, 24, 43); */
  overflow: hidden;
}
.Before{
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left: 0;
  backface-visibility: hidden;
  transition: 3s;
  /* background-image:url('../assets/images/1.png'); */
  border:1px solid yellow;
}
.After{
  width: 100%;
  height: 100%;
  /* background-color: black; */
  /* background-origin: ; */
  background-image: url(../assets/images/4.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  transform: rotateY(-180deg);
  backface-visibility: hidden;
  transition: 3s;
}
.top-left:hover .Before{
  transform: rotateY(180deg);
}
.top-left:hover .After{
  transform: rotateY(0deg);
}
/* 右边第二个 */
.top-right{
  width: 48%;
  height: 90%;
  margin: 2%;
  border-radius: 1rem;
  position: relative;
  perspective: 800px;
  border: 0.3rem dashed rgb(172, 243, 128);
  overflow: hidden;
}
.Before2{
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left: 0;
  backface-visibility: hidden;
  transition: 3s;
  /* background-image:url('../assets/images/1.png'); */
  border:1px solid yellow;
}
.After2{
  width: 100%;
  height: 100%;
  /* background-color: black; */
  /* background-origin: ; */
  background-image: url(../assets/images/5.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  transform: rotateX(180deg);
  backface-visibility: hidden;
  transition: 3s;
}
.top-right:hover .Before2{
  transform: rotateX(-180deg);
}
.top-right:hover .After2{
  transform: rotateX(0deg);
}
/* 第三个 */
.bottom-left{
  width: 48%;
  height: 90%;
  margin: 2%;
  border-radius: 1rem;
  position: relative;
  perspective: 800px;
  border: 0.3rem dashed rgb(251, 244, 121);
  overflow: hidden;
}
.Before3{
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left: 0;
  backface-visibility: hidden;
  transition: 3s;
  /* background-image:url('../assets/images/1.png'); */
  border:1px solid yellow;
}
.After3{
  width: 100%;
  height: 100%;
  /* background-color: black; */
  /* background-origin: ; */
  background-image: url(../assets/images/6.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  transform: rotateX(-180deg);
  backface-visibility: hidden;
  transition: 3s;
}
.bottom-left:hover .Before3{
  transform: rotateX(180deg);
}
.bottom-left:hover .After3{
  transform: rotateX(0deg);
}
.bottom-right{
  width: 48%;
  height: 90%;
  margin: 2%;
  border-radius: 1rem;
  position: relative;
  perspective: 800px;
  border: 0.3rem dashed rgb(116, 200, 225);
  overflow: hidden;
}
.Before4{
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left: 0;
  backface-visibility: hidden;
  transition: 3s;
  /* background-image:url('../assets/images/1.png'); */
  border:1px solid yellow;
}
.After4{
  width: 100%;
  height: 100%;
  /* background-color: black; */
  /* background-origin: ; */
  background-image: url(../assets/images/7.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  transition: 3s;
}
.bottom-right:hover .Before4{
  transform: rotateY(-180deg);
}
.bottom-right:hover .After4{
  transform: rotateY(0deg);
}

.right-text{
  width: 60%;
  /* height: 10%; */
  /* margin-top: 100%; */
  padding-top: 2%;
  margin: auto;
}
.top-left .right-text .text{
  color: rgb(130, 192, 202);
  font-size: 0.85rem;
  overflow: hidden;
  font-size: 0.9rem;
}

.top-right .right-text .text{
  color: rgb(130, 192, 202);
  font-size: 0.85rem;
  overflow: hidden;
}

.bottom-left .right-text .text{
  color: rgb(90, 127, 99);
  font-size: 0.85rem;
}

.bottom-right .right-text .text{
  color: rgb(148, 224, 214);
  font-size: 0.85rem;
}
.titlt{
  color: rgb(61, 154, 141);
  font-size: 0.85rem;
  width: 28%;
  /* height: 10%; */
  margin: auto;
  /* padding-top: 1rem; */
  font-size: 1.2rem;
  padding-top: 10%;
  border-bottom: solid green 0.01rem;
}
.atitle{
  width: 100%;
  margin-top: 10%;
  text-align: center;
}

@media screen and (max-width:768px){
  .body{
    width: 100%;
    height: 80rem;
    margin-top: 1%;
    display: flex;
    flex-direction: column;
  }
  .left{
    width: 100%;
    height: 90%;
    margin-left: 0%;
    top: 1%;
    /* background-color: gray; */
  }

  .left-imag{
    height: 15%;
    /* background-color: pink; */
  }

  .imag1{
    width: 30%;
    margin-right: 5%;
    zoom: 0.4;
    background-image: url(../assets/images/notice/3.png);
  }
  .imag2{
    width: 25%;
    height: 100%;
    margin-right: 10%;
    zoom: 0.4;
    background-image: url(../assets/images/notice/3.png);
  }
  .imag3{
    width: 30%;
    height: 100%;
    zoom: 0.4;
    background-image: url(../assets/images/notice/3.png);
  }

  .left-text{
    width: 90%;
    height: 73%;
    margin: auto;
    /* margin-top: 3%; */
    border: solid 0.5rem rgb(255, 157, 204);
    border-radius: 1rem;
    /* background-color: bisque; */
  }

  /* 右边 */
  
  .right{
    width: 100%;
    height: 100%;
    margin-left: 0;
    position: relative;
    top: -2%;
    /* background-color: gray; */
  }

}
@media screen and (max-width:992px) and (min-width:768px){
    .body{
      width: 100%;
      height: 40rem;
      margin-top: 1%;
      display: flex;
      flex-direction: row;
    }
    .imag1{
      width: 650rem;
      height: 14rem;
      /* margin-right: 50%; */
      background-position: -4.9rem 0rem;
      zoom: 0.6;
      background-image: url(../assets/images/notice/3.png);
      /* background-color: blue; */
    }
    .imag2{
      display: none;
    }
    .imag3{
      display: none;
    }

}

</style>